<template>
  <div class="select-products2">
    <header>
      <p>选择商品</p>
      <div class="action-wrap">
        <el-button class="ml32" type="info" plain @click="back"> 返回 </el-button>
      </div>
    </header>

    <div class="content">
      <el-container>
        <el-aside width="200px">
          <el-tree
            :default-expand-all="false"
            :data="treeData"
            :props="{
              children: 'children',
              label: 'name'
            }"
            highlight-current
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </el-aside>
        <el-main>
          <div class="left">
            <el-scrollbar>
              <div class="action-wrap">
                <el-input
                  class="searchkey-input"
                  v-model="searchkey"
                  clearable
                  style="width: 360px"
                  placeholder="请输入商品名称"
                  :suffix-icon="Search"
                  @keyup.enter="getListFun"
                  @clear="
                    () => {
                      searchType = null;
                      getListFun();
                    }
                  "
                />
              </div>
              <el-checkbox-group v-model="checkList" class="list" @change="selectChange">
                <template v-if="list.length > 0">
                  <div class="list-item" v-for="item in list" :key="item.id">
                    <el-checkbox label="" :value="item" />
                    <div class="prod-info">
                      <div class="top">
                        <div class="img"><img :src="item.mainPicUrl" alt="" /></div>
                        <div class="info">
                          <h3 class="name text-over" style="max-width: 300px" :title="item.productAliasName || '-'">
                            {{ item.productAliasName || "-" }}
                          </h3>
                          <p style="white-space: break-spaces">
                            <!-- {{ getSpes(item.properties) }} -->
                            {{ item.skuSpecification }}
                          </p>
                          <p>SKU编码：{{ item.skuCode || "-" }}</p>
                          <p>ID：{{ item.productId || "-" }}</p>
                        </div>
                      </div>
                      <footer>
                        <p>可出库数量：{{ item.availuableNum || "-" }}</p>
                        <p>可出库件数：{{ item.availuablePartNum || "-" }}</p>
                      </footer>
                      <!-- 右上仓库角标 -->
                      <div class="warehouse-icon">{{ item.warehouseName || "-" }}</div>
                    </div>
                  </div>
                </template>
                <div v-else style="display: flex; justify-content: center; width: 100%">
                  <el-empty description="暂无数据" />
                </div>
              </el-checkbox-group>
            </el-scrollbar>
          </div>
          <div class="right">
            <el-scrollbar>
              <template v-if="checkList.length > 0">
                <p class="f14 mb20" style="color: #86909c">已选中：{{ checkList.length }}</p>
                <div class="list">
                  <div class="list-item" v-for="item in checkList" :key="item.id">
                    <div class="prod-info">
                      <div class="top pl10">
                        <div class="img"><img :src="item.mainPicUrl" alt="" /></div>
                        <div class="info">
                          <h3 class="name text-over" style="max-width: 300px" :title="item.productAliasName || '-'">
                            {{ item.productAliasName || "-" }}
                          </h3>
                          <p style="white-space: break-spaces">
                            <!-- {{ getSpes(item.properties) }} -->
                            {{ item.skuSpecification }}
                          </p>
                          <p>SKU编码：{{ item.skuCode || "-" }}</p>
                          <p>ID：{{ item.productId || "-" }}</p>
                        </div>
                      </div>
                      <footer>
                        <p>可出库数量：{{ item.availuableNum || "-" }}</p>
                        <p>可出库件数：{{ item.availuablePartNum || "-" }}</p>
                      </footer>
                      <!-- 右上仓库角标 -->
                      <div class="warehouse-icon">华北2仓</div>
                    </div>
                    <el-button link @click="delRightSku(item)">
                      <img class="del-icon" src="@/assets/images/del.png" alt="" />
                    </el-button>
                  </div>
                </div>
              </template>

              <div v-else style="display: flex; justify-content: center; width: 100%">
                <el-empty description="暂无数据" />
              </div>
            </el-scrollbar>
            <div class="action-btn">
              <el-button plain type="info" @click="checkList = []">取消</el-button>
              <el-button type="primary" :disabled="checkList.length <= 0" @click="save">确认</el-button>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import { pageByKeyword, getShopDetail } from "@/apis/procure/entry";
import { useRoute, useRouter } from "vue-router";
import { getList } from "@/apis/stencil/fittings";
const route = useRoute();
const router = useRouter();
import { getProductInventory, getCategoryList, saveTempProductDelivery } from "@/apis/procure/outbound";
import { ElMessage } from "element-plus";

const warehouseId = ref(route.query.warehouseId);
const optionInfo = ref({ isShow: false, detail: {} });
const searchType = ref("");
const searchkey = ref("");
const list = ref([]);
const checkList = ref([]); //选中的skuId
const checkObjs = ref([]); //选中的skuObj
const options = ref([
  { label: "商品id", value: "1" },
  { label: "商品名称", value: "2" },
  { label: "商品分类", value: "3" }
]);
const treeData = ref([]);

watch(
  () => checkList.value,
  val => {},
  { deep: true }
);

onMounted(() => {
  getTree(); //查询商品分类tree
  getListFun(); //查询商品sku列表数据
});

//保存临时选择的商品
const save = () => {
  saveTempProductDelivery({
    code: Number(route.query._time),
    redisSaveTempVOList: checkList.value
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "商品暂存成功！",
        type: "success"
      });
      back();
    }
  });
};

//点击右侧的删除图标按钮
const delRightSku = item => {
  const index = checkList.value.findIndex(obj => obj.skuCode === item.skuCode);
  if (index >= 0) {
    checkList.value.splice(index, 1);
  }
};

const getTree = async () => {
  await getCategoryList({ type: 2, warehouseId: warehouseId.value }).then(res => {
    treeData.value = res.data || [];
  });
};

const back = () => {
  // console.log(111, route.query._time);
  router.push({ path: "/procure/outbound/add", query: { warehouseId: warehouseId.value, _time: route.query._time } });
};

const selectChange = () => {
  console.log("选中的数据", checkList.value);
};

//点击分类树节点，查询新的sku列表数据
const handleNodeClick = (data, node) => {
  if (data.children.length <= 0) {
    getListFun(data);
  }
};

//查询商品sku列表数据
const getListFun = data => {
  let params = {
    warehouseId: warehouseId.value,
    categoryId: data ? data.categoryId : "",
    searchKeyword: searchkey.value,
    page: 1,
    size: 9999,
    type: 2
  };
  getProductInventory(params).then(res => {
    if (res.code === 200) {
      list.value = res.data.records;
    }
  });
};

const close = () => {
  optionInfo.value.isShow = false;
};

//拼接商品的sku规格
const getSpes = properties => {
  if (!properties) return "-";
  const arr = JSON.parse(properties) || [];
  if (arr.length > 1) {
    const str = arr.reduce((a, b) => {
      return a.specificationVal + "+" + b.specificationVal;
    });
    return str;
  } else if (arr.length === 1) {
    return arr[0].specificationVal;
  } else {
    return "-";
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  padding: 0 !important;
}
:deep(.el-tree) {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 94px;

  .el-icon.el-tree-node__expand-icon {
    padding-left: 10px;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #d9e8ff !important;
    color: #007dff;

    .custom-tree-node i {
      color: #007dff !important;
    }
  }
}
.select-products2 {
  height: calc(100% - 0px);
  overflow-y: auto;
  padding: 0 20px 0 20px;
  header {
    background-color: white;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    margin: 0 -20px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #e2e8f0;
    p {
      color: #131414;
      font-size: 18px;
      position: relative;
      padding-left: 14px;
      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #409eff;
      }
    }
    .action-wrap {
      display: flex;
    }
  }
  .content {
    height: calc(100% - 62px);
    margin: 0 -20px;
    :deep(.el-container) {
      height: 100%;
    }

    :deep(.el-aside) {
      height: 100%;
      overflow-y: auto;
      padding: 14px 0;
      box-sizing: border-box;
    }
    :deep(.el-main) {
      height: 100%;
      overflow-y: auto;
      border-left: 1px solid #e2e8f0;
      display: flex;
      padding: 0;
      & > div {
        flex: 1;
      }
      .list-item {
        position: relative;
        background-color: #f5f7fa;
        border-radius: 2px;
        margin: 0 20px 10px 0;
        .el-checkbox {
          position: absolute;
          top: 40px;
          left: 10px;
        }
        .prod-info {
          min-height: 100px;
          font-size: 16px;
          position: relative;
          .img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            background-color: #eee;
            margin-right: 20px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 4px;
            }
          }
          .info {
            flex: 1;
          }
          h3 {
            font-size: 16px;
            color: #3d3d3d;
            line-height: 22px;
          }
          p {
            font-size: 12px;
            line-height: 20px;
            color: #86909c;
          }
          .top {
            display: flex;
            padding: 10px;
            padding-left: 46px;
          }
          footer {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-top: 1px solid #e1e6ed;
          }
          .warehouse-icon {
            position: absolute;
            right: 0;
            top: 0;
            background-color: #d9edff;
            border-radius: 12px 0px 0px 12px;
            font-size: 12px;
            line-height: 24px;
            padding: 0 9px 0 15px;
          }
        }
      }
      .left {
        padding: 20px 0 20px 20px;
        .action-wrap {
          display: flex;
          justify-content: space-between;
          position: sticky;
          top: 0;
          z-index: 2;
          background-color: white;
          padding-bottom: 20px;
          .searchkey-input {
            .el-input__wrapper {
              background-color: white;
              border: 1px solid #dcdfe6;
              border-radius: 4px;
            }
          }
        }
        .el-checkbox {
          .el-checkbox__inner {
            border-radius: 50%;
            display: inline-block;
            width: 16px;
            height: 16px;

            &::before {
              text-align: center;
              left: 8px;
              top: 0px;
            }

            &::after {
              font-size: 12px;
              text-align: center;
              left: 5px;
              top: 2px;
              width: 4px;
            }
          }
        }
      }
      .right {
        padding: 20px 0 76px 20px;
        border-left: 1px solid #e2e8f0;
        position: relative;
        .list-item {
          background-color: transparent;
          display: flex;
          .prod-info {
            background-color: #f5f7fa;
            flex: 1;
          }
          .del-icon {
            width: 16px;
            height: 16px;
            margin-left: 20px;
          }
        }
        .action-btn {
          position: absolute;
          height: 76px;
          bottom: 0;
          left: 0px;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 2px -4px 8px 0px rgba(66, 78, 102, 0.1);
        }
      }
    }
  }
}
</style>
